<template>
    <div class="my-main">
        <div class="flex-nav">
            <section class="header">
            <div class=" flex-between">
                <span>我的</span>
                <span><router-link to="/my/set">设置</router-link></span>
            </div>
            </section>
            <section class="desc">
                <div class="desc-img">
                    <img src="../../assets/my-logo.png">
                </div>
                <div class="desc-content">
                        <p>Hi,{{sessionData.loginName}}</p>
                        <p>ID：{{sessionData.id}}</p>
                </div>
            </section>
        </div>
          <section class="finance-card otc">
            <div>
                   <dl>
                        <dt class="flex-between otc-total">
                            <h2 >总资产</h2>
                            <img v-if="eyeState"  src="../../assets/my/icon.png" @click="eyeChange()">
                            <img v-if="!eyeState" src="../../assets/my/eyeClose.png" @click="eyeChange()">
                        </dt>
                        <router-link class="profit" to="/finance/asset">
                            <div class="waapper">
                                    <span v-if="eyeState">{{totalAssetInfo}}CNY</span>
                                    <span v-if="!eyeState"><b>*****</b><b>CNY</b></span>
                            </div>
                            <div>
                                <!-- <span>昨日收益：</span> -->
                                <span :style="{'color':totalNum>=0?'#03ad8f':'rgba(243, 109, 125, 1)'}">{{totalNum}}%<img v-if="totalNum>=0" src="../../assets/action/up.png"><img v-if="totalNum<0" src="../../assets/action/re.png"></span>
                            </div>
                        </router-link>
                        <dd class="otc-ht">
                            <router-link to="/finance/payout">
                                <img src="../../assets/my/With.png">
                                提币
                            </router-link>
                            <router-link to="/finance/payin">
                                <img src="../../assets/my/charge.png">
                                充值
                            </router-link>
                        </dd>
                </dl>
            </div>
            <button><i class="mobile_icon_public"></i></button>
        </section>
         <section class="center">
            <div class="auth-public">
             <router-link class="auth" to="/my/make">
                    <div class="my-icon"><img  src="../../assets/my/bb.png" style="margin-top:-4px;"></div>
                        共识生态
                </router-link>
                <router-link class="auth" to="/action">
                <div class="my-icon">
                    <img  src="../../assets/my/money.png">
                </div>
                        邀请返佣
                </router-link>
                   <router-link to="/sub/allow" class="auth">
                   <div class="my-icon">
                        <img  src="../../assets/my/bz.png">
                   </div>
                        亏损补贴
                </router-link>
            </div>
            <div class="auth-public">
                   <router-link to="/safeCenter" class="auth">
                   <div class="my-icon">
                        <img  src="../../assets/my/safe.png">
                   </div>
                        安全中心    
                </router-link>
                 <router-link class="auth" to="/real">
                 <div class="my-icon">
                    <img src="../../assets/my/name.png" style="margin-top:-3px;">
                 </div>
                        实名认证
                </router-link>
                <router-link to="/cust" class="auth">
                <div class="my-icon">
                    <img src="../../assets/my/contact.png">
                </div>
                        联系客服
                </router-link>
            </div>
        </section>
        <section class="proposal">
            <router-link to="center" class="flex">
                <div class="left">  <img src="../../assets/my/help.png">帮助中心</div>
                 <span class="rotate">  <img src="../../assets/my/right.png"></span>
            </router-link>
            <router-link class="flex" to="/center/detail/?id=111">
                <div class="left">  <img src="../../assets/my/gd.png">建议反馈</div>
                 <div  class="rotate">  <img src="../../assets/my/right.png"></div>
            </router-link>
            <router-link class="flex" to="/center/detail/?id=97">
                <div class="left">  <img src="../../assets/my/wo.png">关于我们</div>
                 <div class="rotate">  <img src="../../assets/my/right.png"></div>
            </router-link>
        </section>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name:'my',
   data(){
         return {
         sessionData:'',
         totalAssetInfo:null,
         eyeState:'',
         totalNum:'',symbol:''
         }
    },
    mounted() {
        this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
            this.sessionData=res.data.data;
              this.promotionRewards();
        })
        
        this.totalAssets();
        if(localStorage.getItem("my.syeState")=='false'){
            this.eyeState=false;
        }else{
            this.eyeState=true;
        }
        this.getOtcList();
    },
    methods: {
          getOtcList(){this.$http.post('/v2/market/allcoins',).then((res)=>{
                let tickers = res.data;
                 let coinGroup = {}
                    let param = location.hash.match(new RegExp(".*" + 'symbol' + "=([^\&]*)(\&?)", "i"));
                    let symbol = param && !isNaN(param[1]) ? param[1] : 0;
                    let current = null;
                    for (let i = 0; i < tickers.length; i++) {
                        let ticker = tickers[i]
                        if(ticker.report){
                            current = ticker
                        }
                    }
                   this.symbol=current;
                 this.myProperty();
             })
          },
        promotionRewards(){
               this.$http.post('/v1/account/promotionRewards').then((res)=>{
                if(res.data.code==200){
                    this.rewards=res.data.data;
                }
             })
        },
        myProperty(){
            let param={userId: this.sessionData.id,
            fViFId:this.symbol.fid}
        this.$http.post('v2/bankerWallet/myProperty',param).then((res)=>{
               this.totalNum=parseFloat(res.data.data.totalNum);
            })
        },
         totalAssets(){
             this.$http.post("v1/account/TotalAssets").then(res=>{
                 if(res.data.code==200){
                     this.totalAssetInfo=parseFloat(res.data.data.total).toFixed(2);
                 }
             })
        },
        eyeChange(e){
            if(e && e.stopPropagation){
                e.stopPropagation;
            }
            this.eyeState=!this.eyeState;
            console.log( this.eyeState)
            localStorage.setItem("my.syeState",this.eyeState);
        },
        handleClose(){
                this.$router.go(-1);
            },
    },
}
</script>
<style lang="less" scoped>
.proposal{
    a{
        color: #E0E0F9;
    }
    .flex{
        height:96px;
        background:rgba(34,34,64,1);
          display: flex;
        justify-content: space-between;
        margin-bottom: 2px;
          align-items: center;
          padding-left: 30px;
          padding-right: 30px;
          .left img{
              margin-right: 30px;
          }
    }
}
.otc-ht a{
    color: #fff;
}
.my-main {
     a{
    color: #fff;
    }
    .desc-content{
        width: 75%;
    }
    .center{
    position: relative;
    margin-top: 60px;
    margin-bottom: 20px;
    .auth-public{
        display: flex;
        margin-top: 40px;
        .auth{
            border-right:1px solid rgba(134,134,192,1);
            width: 33.5%;
            height: 200px;
            flex-direction: column;
            align-items: center;
            display: flex;
            justify-content: center;
            color: #E0E0F9;
            .my-icon{
                width: 72px;
                height: 74px;
                box-sizing: border-box;
                margin-bottom: 40px;
            }
            img{
            
            }
        }
    }
}
    .profit{
        span{
             color: #E0E0F9;
        }
        font-size: 30px;
        display: flex;
        justify-content: space-between;
        margin: 20px;
        height: 60px;
}
.otc-ht{
display: flex;
justify-content: space-between;
color: #E0E0F9;
background:#222240;
border-radius:0px 0px 20px 20px;
height: 80px;
line-height: 80px;
padding-left: 20px;
padding-right: 20px;
a{
    width: 50%;
}
a:nth-child(1){
   border-right:2px solid rgba(22,23,54,1);
}
text-align: center;
}
    .finance-card dl {
    color: #fff;
}
.finance-card dl dt {
    font-size: 32px;
    line-height: 60px;
    padding: 20px;
    height: 60px;
}
.finance-card dl dd {
    margin-top: 30px;
    font-weight: 400;
}

}
.nav a{
    color: #E0E0F9;
}
 .my-main .finance-card {
     border:1px solid #222240;
    height: 264px;
    margin: 0 30px;
    border-radius: 20px 20px 0 0;
    background:#161736;
box-shadow:0px 0px 12px 0px rgba(133,183,255,0.2);
    position: relative;
      margin-top: -60px;
}
    .header{
        height: 60px;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 30px;
       span:nth-child(1){
            font-weight:500;
        font-size:36px;
       }
        span:nth-child(2){
            font-weight:400;
        font-size:32px;
        position: relative;
        top:3px;
       }
    }
    .my-main{
        color: #E0E0F9;
    }
    .flex-nav{
        background: url('https://biplush.oss-ap-southeast-1.aliyuncs.com/upload/html/my-bg.png');
    }
    .desc{
        margin-top: -2px;
    padding-top: 40px;
        height: 200px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        .desc-content{
           p:nth-child(1){
                font-size:36px;
           }
            p:nth-child(2){
               font-size:28px;
               color: #ADADD8;
                  height:80px;
                  line-height:80px;
           }
             p{
            line-height:40px;
              height:40px;
             }
        }
        .desc-img{
            width: 20%;
            img{
                 width: 100px;
            width: 100px;
            border-radius: 50%;
            }
        }
         display: flex;
         align-content: center;
         padding-left: 30px;
         padding-right: 30px;
    }
    .finance .otc {
        height: 264px;
    margin: 0 40px;
    border-radius: 20px 20px 0 0;
    background: #2E2E59;
    position: relative;
    color: #E0E0F9;
}
.flex-between{
    display: flex;
justify-content: space-between;
}
.rotate img{
    transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-mz-transform:rotate(-180deg);
}
.otc-total{
    align-items: center;
}
.otc-total img{
    width: 42px;
    height: 30px;
}

</style>